<template>
  <page-view class="address">
    <page-header title="修改收货地址" :show-back="true"></page-header>
    <!-- 地址是area-list渲染出来的,把值丢进去就行了 -->
    <!-- placeholder="给的是初始值" -->

    <address-edit
      :area-list="areaList"
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="onEdit"
      :is-saving="isSubmiting"
      :address-info="addressEditAddressInfo"
      show-delete
      save-button-text="编辑"
      @delete="onDelete"
    >
      <field
        v-model="tag"
        label="标签"
        placeholder="给地址设置一个标签"
        required
    /></address-edit>
  </page-view>
</template>

<script>
import { AddressEdit, Area, Field, CellGroup, Toast, Dialog } from "vant";
import { reactive, toRefs } from "vue";
import PageHeader from "@/components/PageHeader.vue";
import api from "@/utils/api";
import { useRouter, useRoute } from "vue-router";
export default {
  name: "EditAddressInfo",
  components: {
    AddressEdit,
    PageHeader,
    Area,
    Field,
    CellGroup,
  },
  setup() {
    const router = useRouter();
    const route = useRoute();

    //页面所需要的动态数据
    let info = reactive({
      areaList: {},
      isSubmiting: false,
      tag: "",
      areaMap: new Map(),
    });
    //点击保存按钮后的事件
    const onEdit = async (content) => {
      if (info.isSubmititing) return;
      info.isSubmiting = true;
      let address_info = {
        address: [
          content.province,
          content.city,
          content.county,
          content.addressDetail,
        ].join(" "),
        phone: content.tel,
        person_name: content.name,
        tag: info.tag,
        id: route.query.id,
      };
      let res = await api.addressInfo.update(address_info);
      info.isSubmiting = false;
      Toast.success("修改地址成功");
      router.back();
    };
    //找地址(数据库里面读)
    const getAreaList = async () => {
      let res = await api.area.getAreaList();
      info.areaList = res;

      //将所有的省份市区都拿到
      for (let i in res) {
        for (let j in res[i]) {
          info.areaMap.set(res[i][j], j);
        }
      }
      const id = route.query.id;
      if (id) {
        console.log(id);
        findById(id);
      }
    };
    getAreaList();

    const findById = async (id) => {
      let res = await api.addressInfo.findById(id);
      addressEditAddressInfo.name = res.person_name;
      addressEditAddressInfo.tel = res.phone;
      info.tag = res.tag;
      let addressS = res.address.split(" ");
      addressEditAddressInfo.province = addressS[0];
      addressEditAddressInfo.city = addressS[1];
      addressEditAddressInfo.county = addressS[2];
      addressEditAddressInfo.addressDetail = addressS[3];
      addressEditAddressInfo.areaCode = info.areaMap.get(addressS[2]);
    };

    //页面加载的默认值（是该组件的属性address-info）
    const addressEditAddressInfo = reactive({
      name: "",
      tel: "",
      province: "",
      city: "",
      county: "",
      addressDetail: "",
    });
    //以防误操作
    const onDelete = async () => {
      Dialog.confirm({
        title: "系统",
        message: "确定要删除吗?",
      }).then(async () => {
        await api.addressInfo.deleteById(route.query.id);
        Toast.success("地址删除成功");
        router.back();
      });
    };

    return {
      onEdit,
      ...toRefs(info),
      getAreaList,
      addressEditAddressInfo,
      onDelete,
    };
  },
};
</script>

<style lang="scss" scoped></style>
